import { useEffect, useRef } from 'react';
import styles from '@/pages/main/index.less';
import Block from '@/pages/main/components/Block';
import echarts from 'echarts';

const scaleBase = window.scaleBase;

const CenterLeftBottom = props => {
  const { data } = props;
  const chart = useRef();

  const renderChart = () => {
    const { process = [] } = data;
    const seriesData = process.map(({datetime, percent}) => [new Date(datetime).getTime(), percent])
    const [last = []] = seriesData;
    const [time] = last;

    const option = {
      animation: false,
      grid: {
        left: 35 * scaleBase,
        bottom: 20 * scaleBase,
        top: 10 * scaleBase,
        right: 30 * scaleBase,
      },
      xAxis: {
        type: 'time',
        axisLabel: {
          color: '#fff',
          fontSize: 10 * scaleBase,
          margin: 10 * scaleBase,
          formatter: (value, index) => {
            return new Date(value).format('hh:mm:ss')
          }
        },
        max: time + 1000 * 60 * 30,
        // maxInterval: 100 * 1000,
        axisTick: {
          inside: true,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#283246',
            width: 2 * scaleBase
          }
        },
        axisLine: {
          lineStyle: {
            color: '#283246',
            width: 2 * scaleBase
          }
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
          fontSize: 10 * scaleBase,
          margin: 10 * scaleBase,
          formatter: '{value}%',
        },
        axisTick: {
          inside: true
        },
        max: 100,
        splitLine: {
          lineStyle: {
            color: '#283246',
            width: scaleBase
          }
        },
        axisLine: {
          lineStyle: {
            color: '#283246',
            width: scaleBase
          }
        },
        // position: 'right',
      },
      series: [
        {
          type: 'line',
          smooth: true,
          symbol: (value, params) => {
            if(params.dataIndex === 0){
              return 'emptyCircle'
            }
            return 'none';
          },
          symbolSize: 8 * scaleBase,
          // sampling: 'average',
          itemStyle: {
            color: '#3c7cf7',
            shadowColor: '#fff',
            shadowBlur: 8 * scaleBase,
            borderWidth: 2 * scaleBase,
          },
          lineStyle: {
            color: '#3c7cf7',
            width: 2 * scaleBase,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#335088'
            }, {
              offset: 1,
              color: '#0e1624'
            }])
          },
          label: {
            show: true,
            color: '#fff',
            distance: 5 * scaleBase,
            fontSize: 10 * scaleBase,
            formatter: '{@[1]}%'
          },
          // markLine: {
          //   symbol: 'none',
          //   label: {
          //     distance: 16 * scaleBase,
          //     fontSize: 12 * scaleBase,
          //   },
          //   data: [{
          //     name: '',
          //     yAxis: value,
          //   }]
          // },
          data: seriesData
        },
        // {
        //   type: 'line',
        //   smooth: true,
        //   symbol: (value, params) => {
        //     if(params.dataIndex === 0){
        //       return 'emptyCircle'
        //     }
        //     return 'none';
        //   },
        //   symbolSize: 8 * scaleBase,
        //   // sampling: 'average',
        //   itemStyle: {
        //     color: '#3c7cf7',
        //     shadowColor: '#fff',
        //     shadowBlur: 8 * scaleBase,
        //     borderWidth: 2 * scaleBase,
        //   },
        //   lineStyle: {
        //     color: '#3c7cf7',
        //     width: 2 * scaleBase,
        //   },
        //   areaStyle: {
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //       offset: 0,
        //       color: '#335088'
        //     }, {
        //       offset: 1,
        //       color: '#0e1624'
        //     }])
        //   },
        //   label: {
        //     show: true,
        //     color: '#fff',
        //     distance: 5 * scaleBase,
        //     fontSize: 10 * scaleBase,
        //     formatter: '{@[1]}%',
        //     position: 'right'
        //   },
        //   data: seriesData.map(([l, r]) => [l, r - parseFloat(Math.random().toFixed(2) * 15)])
        // },
      ]
    };

    chart.current.setOption(option);
  }
  const renderStatistics = () => {
    return <div>
      <div className={styles.centerLeftBottomStatisticsItemWrapper}>
        <h2>订单数</h2>
        <div className={styles.centerLeftBottomStatisticsItem}>
          <div>
            <h4>{data?.total}</h4>
            <h3>总订单数</h3>
          </div>
          <div>
            <h4>{data?.sorted}</h4>
            <h3>已分拣数</h3>
          </div>
        </div>
      </div>
      <div className={styles.centerLeftBottomStatisticsItemWrapper}>
        <h2>订货数</h2>
        <div className={styles.centerLeftBottomStatisticsItem}>
          <div>
            <h4>{data?.order}</h4>
            <h3>总订货数</h3>
          </div>
          <div>
            <h4>{data?.sortedOrder}</h4>
            <h3>已分拣数</h3>
          </div>
        </div>
      </div>
    </div>
  }
  const renderBottom = () => {
    return <div>
      <div className={styles.centerLeftBottomBottomItemWrapper}>
        <h2>农网</h2>
        <div className={styles.centerLeftBottomStatisticsItem}>
          <div>
            <h4>{data?.order}</h4>
            <h3>总订货数</h3>
          </div>
          <div>
            <h4>{data?.sortedOrder}</h4>
            <h3>已分拣数</h3>
          </div>
        </div>
      </div>
      <div className={styles.centerLeftBottomBottomItemWrapper}>
        <h2>城网</h2>
        <div className={styles.centerLeftBottomStatisticsItem}>
          <div>
            <h4>{data?.order}</h4>
            <h3>总订货数</h3>
          </div>
          <div>
            <h4>{data?.sortedOrder}</h4>
            <h3>已分拣数</h3>
          </div>
        </div>
      </div>
      <div className={styles.centerLeftBottomBottomItemWrapper}>
        <h2>嘉峪关</h2>
        <div className={styles.centerLeftBottomStatisticsItem}>
          <div>
            <h4>{data?.order}</h4>
            <h3>总订货数</h3>
          </div>
          <div>
            <h4>{data?.sortedOrder}</h4>
            <h3>已分拣数</h3>
          </div>
        </div>
      </div>
    </div>
  }
  const renderBody = () => {
    return <div className={styles.centerLeftBottomChartWrapper}>
      <div className={styles.centerLeftBottomTop}>
        <div className={styles.centerLeftBottomChart}>
          <div id={'center-left-bottom-chart'}/>
        </div>
        <div className={styles.centerLeftBottomStatistics}>
          {renderStatistics()}
        </div>
      </div>
      <div className={styles.centerLeftBottomBottom}>
        {renderBottom()}
      </div>
    </div>
  }
  useEffect(()=> {
    chart.current = echarts.init(document.getElementById('center-left-bottom-chart'));
  }, []);

  useEffect(()=> {
    data && renderChart();
  });

  return <Block
    containerClassName={styles.bottom}
    title={'分拣进度情况'}
    body={renderBody()}
  />
}

export default CenterLeftBottom;
